<template>
  <div class="home">
    <van-nav-bar title="新增地址" left-arrow>
      <template #left>
        <Back />
      </template>
    </van-nav-bar>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="methods.onSave"
    />
  </div>
</template>

<script lang="ts" setup>
import { postFormData } from '@/api'
import Back from '@/components/Back.vue'
import { areaList } from '@vant/area-data'
import { AddressEditInfo } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()

const methods = {
  onSave(info: AddressEditInfo) {
    postFormData({
      url: '/address/add',
      params: {
        name: info.name,
        phone: info.tel,
        province: info.province,
        city: info.city,
        district: info.county,
        detail_address: info.addressDetail,
        // areaCode: info.areaCode,
        // postalCode: info.postalCode,
        is_default: info.isDefault ? 1 : 0
      }
    })
      .then((res) => {
        console.log({ res })
        router.go(-1)
      })
      .catch((err) => {
        console.error(err)
      })
  }
}
</script>

<style lang="less" scoped>
.home {
  min-height: 100vh;
  background-color: rgb(245, 245, 245);
}
:deep(.van-button--danger) {
  background-color: rgb(12, 52, 186);
  border: 1px solid rgb(12, 52, 186);
}
</style>
